<template>
  <div class="card">
    <h3>单一文件上传「FORM-DATA」</h3>
    <section class="upload_box" id="upload1">
      <input
        ref="inputRef"
        type="file"
        class="upload_inp"
        accept=".png,.jpg,.jpeg"
        @change="changeFile"
      />
      <div class="upload_button_box">
        <button
          :class="[loading ? 'disable' : '']"
          class="upload_button select"
          @click="selectFile"
        >
          选择文件
        </button>
        <button
          :class="[loading ? 'loading' : '']"
          class="upload_button upload"
          @click="uploadFile"
        >
          上传到服务器
        </button>
      </div>
      <div v-if="!filelist.length" class="upload_tip">
        只能上传 PNG/JPG/JPEG 格式图片且大小不能超过2MB
      </div>
      <div v-else class="file_list">
        <ul>
          <li v-for="item in filelist" :key="item.file.name">
            <span>文件名：{{ item.file.name }}</span>
            <em @click="deleteFile(item)">移除</em>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script setup>
import { useUploadSingle } from "@/hook";
// 封装上传钩子
let {
  inputRef,
  filelist,
  loading,
  selectFile,
  changeFile,
  uploadFile,
  deleteFile,
} = useUploadSingle();
</script>

<style>
section {
  margin: 0 auto;
}
.file_list {
  width: 100%;
  padding: 10px;
}
.file_list span {
  display: inline-block;
  margin-right: 10px;
  max-width: 70%;
  color: #999;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.file_list em {
  padding: 0 5px;
  color: lightcoral;
  cursor: pointer;
  font-style: normal;
  font-size: 14px;
  vertical-align: middle;
}
</style>
